<template>
    <div class="margin-left-48">
        <el-col :span="12">
            <el-row>
                <div class="screen-float-left">
                    <span class="screen-title-01">报到率</span>
                    <div class="screen-student-rate-val screen-rate-color">
                        {{formData.postgraduateRegisterRate | percentage}}
                    </div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">绿色通道</span>
                    <div class="screen-student-green-val screen-green-color">
                        {{formData.postgraduateGreenChannelCount}}
                    </div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">研究生总人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">
                        {{formData.postgraduateTotalCount}}
                    </div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">含外地点人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">
                        {{formData.postgraduateOtherCount}}
                    </div>
                </div>
            </el-row>
            <el-row class="margin-top-48">
                <div class="screen-data-title-max screen-float-left">
                    四平路校区·研究生报到人数
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:80px">
                    <span class="screen-title-02">硕士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduateMasterRegisterCountB}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduateMasterTotalCountB}}
                    </span>
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:24px">
                    <span class="screen-title-02">博士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduatePhdRegisterRateB}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduatePhdTotalCountB}}
                    </span>
                </div>
            </el-row>
            <el-row class="margin-top-16">
                <div class="screen-data-number screen-postgraduate-color">{{formData.postgraduateRegisterCountB[0]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountB[1]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountB[2]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountB[3]}}</div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">总人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateTotalCountB}}</div>
                </div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">未报到人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateNoRegisterCountB}}</div>
                </div>
            </el-row>
            <el-row class="margin-top-48">
                <div class="screen-data-title-max screen-float-left">
                    嘉定校区·研究生报到人数
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:80px">
                    <span class="screen-title-02">硕士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduateMasterRegisterCountA}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduateMasterTotalCountA}}
                    </span>
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:24px">
                    <span class="screen-title-02">博士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduatePhdRegisterRateA}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduatePhdTotalCountA}}
                    </span>
                </div>
            </el-row>
            <el-row class="margin-top-16">
                <div class="screen-data-number screen-postgraduate-color">{{formData.postgraduateRegisterCountA[0]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountA[1]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountA[2]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountA[3]}}</div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">总人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateTotalCountA}}</div>
                </div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">未报到人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateNoRegisterCountA}}</div>
                </div>
            </el-row>
            <el-row class="margin-top-48">
                <div class="screen-data-title-max screen-float-left">
                    沪西校区·研究生报到人数
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:80px">
                    <span class="screen-title-02">硕士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduateMasterRegisterCountC}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduateMasterTotalCountC}}
                    </span>
                </div>
                <div class="screen-area-sum screen-float-left" style="margin-left:24px">
                    <span class="screen-title-02">博士：</span>
                    <span class="screen-title-02 screen-postgraduate-color">
                      {{formData.postgraduatePhdRegisterRateC}}
                    </span>
                    <span class="screen-title-02"> / </span>
                    <span class="screen-title-02">
                      {{formData.postgraduatePhdTotalCountC}}
                    </span>
                </div>
            </el-row>
            <el-row class="margin-top-16">
                <div class="screen-data-number screen-postgraduate-color">{{formData.postgraduateRegisterCountC[0]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountC[1]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountC[2]}}</div>
                <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCountC[3]}}</div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">总人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateTotalCountC}}</div>
                </div>
                <div class="screen-student-sum">
                    <span class="screen-title-02">未报到人数</span>
                    <div class="screen-student-sum-val screen-postgraduate-color">{{formData.postgraduateNoRegisterCountC}}</div>
                </div>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-row class="margin-top-16">
                <div class="screen-chart" id="postgraduateChart"></div>
            </el-row>
            <el-row class="margin-top-32">
                <div class="screen-data-title">
                    各学院报到统计
                </div>
            </el-row>
            <el-row class="screen-collage-table-container" style="height:534px;">
                <table>
                    <thead>
                        <tr height="52px">
                            <th v-for="(column,index) in table.columns" :key="index" class="screen-collage-table-title" :width="column.width" :align="column.align">{{column.title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr height="4px">
                            <td :colspan="table.columns.length">
                                <div class="header-line"></div>
                            </td>
                        </tr>
                        <tr height="8px">
                            <td :colspan="table.columns.length"></td>
                        </tr>
                        <tr v-for="(tableData,index) in formData.registerCollegeList" v-if="isCurrentPageData(index)" :key="index" height="48px">
                            <td :width="table.columns[0].width">
                                {{tableData[table.columns[0].key]}}
                            </td>
                            <td :width="table.columns[1].width">
                                <div style="line-height:48px">
                                    <div class="screen-rate-color" style="width:100px;float:left;">{{tableData.collegeRegisterRate | percentage2}}</div>
                                    <div style="float:left;width:220px;margin-top:15px;">
                                      <el-progress class="postgraduate-progress" :percentage="tableData.collegeRegisterRate*100" :stroke-width="18" :show-text="false"></el-progress>
                                    </div>
                                </div>
                            </td>
                            <td :width="table.columns[2].width" align="center">
                                {{tableData[table.columns[2].key]}}
                            </td>
                            <td :width="table.columns[3].width" align="center">
                                {{tableData[table.columns[3].key]}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-row>
        </el-col>
    </div>
</template>

<script>
import echarts from "echarts";
import screenApi from "common/src/api/screen";
import filters from "common/src/filters";
export default {
  name: "All",
  props: ["colors"],
  data() {
    return {
      collageTimer: undefined,
      table: {
        pageNum: 1,    // 当前页码，从1开始。
        pageSize: 10,  // 每页显示数据条数。
        columns: [
          {
            width: "270px",
            title: "学院",
            key: "collegeNameI18n",
            align: "left"
          },
          {
            width: "340px",
            title: "报到率",
            key: "collegeRegisterRate",
            align: "left"
          },
          {
            width: "120px",
            title: "已报到人数",
            key: "collegeRegisterCount",
            align: "center"
          },
          {
            width: "100px",
            title: "总人数",
            key: "collegeTotalCount",
            align: "center"
          }
        ]
      },
      formData: {
        postgraduateRegisterRate: 0,
        postgraduateGreenChannelCount: 0,
        postgraduateTotalCount: 0,
        postgraduateOtherCount: 0,
        postgraduateRegisterCountA: "0000",
        postgraduateRegisterCountB: "0000",
        postgraduateRegisterCountC: "0000",
        postgraduateTotalCountA: 0,
        postgraduateTotalCountB: 0,
        postgraduateTotalCountC: 0,
        postgraduateNoRegisterCountA: 0,
        postgraduateNoRegisterCountB: 0,
        postgraduateNoRegisterCountC: 0,
        postgraduateMasterRegisterCountA: 0,
        postgraduateMasterRegisterCountB: 0,
        postgraduateMasterRegisterCountC: 0,
        postgraduateMasterTotalCountA: 0,
        postgraduateMasterTotalCountB: 0,
        postgraduateMasterTotalCountC: 0,
        postgraduatePhdRegisterRateA: 0,
        postgraduatePhdRegisterRateB: 0,
        postgraduatePhdRegisterRateC: 0,
        postgraduatePhdTotalCountA: 0,
        postgraduatePhdTotalCountB: 0,
        postgraduatePhdTotalCountC: 0,
        xAxisKey: [],
        xAxisData1: [],
        registerCollegeList: []
      }
    };
  },
  filters: {
    percentage(rate) {
      return filters.percentage(rate);
    },
     percentage2(rate) {
        if(rate > 0){
            return (rate*100).toFixed(2) + '%'
        }else{
            return '0%'
        }
    //   return filters.percentage(rate);
    }

    // percentage2(rate) {
    //   console.log(rate,111111)
    //     if(rate > 0 && rate <10){
    //         return (rate*100).substring(0,4) + '%'
    //     }else if(rate >10 && rate < 100){
    //         return (rate*100).substring(0,5) + '%'
    //     }else{
    //         return '0%'
    //     }
      
    //   return filters.percentage(rate);
  //   }
  },
  methods: {
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("postgraduateChart"));
      // 指定图表的配置项和数据
      myChart.setOption({
        xAxis: {
          show: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: this.formData.xAxisKey,
          axisLabel: {
            color: "#7795b1"
          }
        },
        yAxis: {
          show: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: "bar",
            data: this.formData.xAxisData1,
            barWidth: "16px",
            stack: "aaaaa",
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#c4cce3"
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.colors.postgraduate.color0
                  },
                  {
                    offset: 1,
                    color: this.colors.postgraduate.color1
                  }
                ]),
                //柱形图圆角，初始化效果
                barBorderRadius: [7, 7, 7, 7]
              }
            }
          }
        ]
      });
    },
    isCurrentPageData(index) {
      return index >= (this.table.pageNum-1)*this.table.pageSize && index < this.table.pageNum*this.table.pageSize;
    },
    changeBackendData(data) {
      let formData = data;
      // 四平路校区·研究生报到人数
      formData.postgraduateRegisterCountA = String(
        data.postgraduateRegisterCountA
      ).padStart(4, "0");
      // 四平路校区·研究生报到人数
      formData.postgraduateRegisterCountB = String(
        data.postgraduateRegisterCountB
      ).padStart(4, "0");
      // 沪西校区·研究生报到人数
      formData.postgraduateRegisterCountC = String(
        data.postgraduateRegisterCountC
      ).padStart(4, "0");

      // 本研分时统计图表
      formData.xAxisKey = [];
      formData.xAxisData1 = [];

      // 柱形图数据
      for (let item of data.registerDayList) {
        formData.xAxisKey.push(item.hourKey);
        formData.xAxisData1.push(item.postRegisterCounts);
      }
    //   if(formData.registerCollegeList){
    //     _.forEach(formData.registerCollegeList, item=>{
    //         item.collegeRegisterRate = _.round(item.collegeRegisterCount / item.collegeTotalCount, 2);
    //     })
    //   }
      return formData;
    },
    initTimer() {
      this.collageTimer = window.setInterval(
        () => {
          let newPageNum;
          if ((this.table.pageNum*this.table.pageSize) < this.formData.registerCollegeList.length) {
            newPageNum = this.table.pageNum + 1;
          } else {
            newPageNum = 1;
          }
          this.table.pageNum = newPageNum;
        },
        2000
      );
    },
    init() {
      screenApi
        .findStudentRegisterInfo(3)
        .then(
          response => {
            if (response.code === 200) {
              this.formData = this.changeBackendData(response.data);
              this.renderChart();
            }
          },
          error => {
            // 数据保存为上一次请求的数据。
          }
        )
        .catch(error => {
          // 数据保存为上一次请求的数据。
        });
    }
  },
  mounted() {
    this.initTimer();
  },
  destroyed() {
    // 销毁定时器
    if (this.collageTimer) {
      window.clearInterval(this.collageTimer);
      this.collageTimer = undefined;
    }
  }
};
</script>

<style scoped>
.margin-top-48 {
  margin-top: 48px;
}

.screen-area-sum {
  float: left;
  margin-left: 16px;
  line-height: 64px;
}

.screen-student-sum {
  float: left;
  margin-left: 16px;
  height: 128px;
  width: 168px;
}

.screen-data-title-max {
  background: url("/static/images/screen/bg_title2.png");
  background-position: left;
  background-repeat: no-repeat;
  width: 368px;
  height: 64px;
  font-size: 24px;
  line-height: 64px;
  text-align: center;
  color: #c4cce3;
}
.screen-float-left {
    float: left;
}
</style>
